<template>
	<div
		class="container"
		:style="[
			{
				'margin-top': style.marginTop,
				'margin-left': style.marginLeft,
			},
		]"
	>
		<template v-if="!isFullpage">
			<history-tabs></history-tabs>
		</template>
		<control-area></control-area>
		<div class="container-content">
			<v-main ref="VMainRef"></v-main>
			<v-copyright></v-copyright>
		</div>

		<v-contextmenu v-model="contextVisible" @on-refresh="onRefresh"></v-contextmenu>
	</div>
</template>

<script setup>
import { computed, shallowRef } from "vue"
import { useSettingStore } from "/store/setting"
import { HEADER_HEIGHT } from "/store/setting/constants"
import HistoryTabs from "./components/history-tabs/index.vue"
import ControlArea from "./components/control-area/index.vue"
import VMain from "./components/main/index.vue"
import VCopyright from "./components/copyright/index.vue"
import VContextmenu from "./components/contextmenu/index.vue"

const settingStore = useSettingStore()

const isFullpage = computed(() => settingStore.fullPage)
const style = computed(() => {
	let marginTop = settingStore.headerHeight + HEADER_HEIGHT + "px"
	let marginLeft = settingStore.leftWidth + "px"
	if (settingStore.fullPage) {
		marginTop = "0px"
		marginLeft = "0px"
	}
	return {
		marginTop,
		marginLeft,
	}
})

const VMainRef = shallowRef(null)
function onRefresh() {
	if (VMainRef.value) {
		VMainRef.value.onRefresh()
	}
}

const contextVisible = shallowRef(false)
window.addEventListener("contextmenu", event => {
	event.preventDefault()
	contextVisible.value = true
})
window.addEventListener("click", () => {
	contextVisible.value = false
})
</script>

<style lang="scss" scoped>
.container {
	transition: var(--transition);
	height: calc(100vh - v-bind("style.marginTop"));
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
	background: var(--background);
	.container-content {
		width: 100%;
		height: calc(100% - 50px);
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
</style>
